<template>
  <div class="back-top">
    <fx-card title="基础用法">
      <ul class="back-top-list">
        <li v-for="i in 100" :key="i">{{ i }}</li>
      </ul>
      <fx-back-top target=".back-top-list"></fx-back-top>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义">
      <ul id="back-top-list">
        <li v-for="i in 100" :key="i">{{ i }}</li>
      </ul>
      <fx-back-top target="#back-top-list" right="10%" bottom="10vh">
        <span class="back-top-icon">
          自定义
        </span>
      </fx-back-top>
      <template #hide>
        <pre v-highlight="option"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'backTop',
  setup () {
    const base = `<ul class="back-top-list">
  <li v-for="i in 100" :key="i">{{ i }}</li>
</ul>
<fx-back-top target=".back-top-list"></fx-back-top>`

    const option = `<ul id="back-top-list">
  <li v-for="i in 100" :key="i">{{ i }}</li>
</ul>
<fx-back-top target="#back-top-list" right="10%" bottom="10vh">
  <span class="back-top-icon">
    自定义
  </span>
</fx-back-top>

.back-top-icon {
  background-color: #2b85e4;
  color: #fff;
  width: 80px;
  height: 60px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center
}`

    return {
      base,
      option
    }
  }
})
</script>

<style scoped lang="scss">
.back-top {
  ul {
    height: 210px;
    overflow-y: auto;

    > li {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: rgba(45, 183, 245, 0.5);
      margin-bottom: 20px;
      color: #fff;
    }
  }
}

.back-top-icon {
  background-color: #2b85e4;
  color: #fff;
  width: 80px;
  height: 60px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center
}
</style>
